<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>附件</el-breadcrumb-item>
            <el-breadcrumb-item>全部</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-collapse accordion>
        <el-collapse-item title="SHOW ATTRIBUTES" name="1">
          <el-table :data="tableAttr" border style="width: 100%">
            <el-table-column prop="index" label="INDEX">
              <template scope="scope">
                <span class="link" @click="getDetail(scope.row.index)">{{scope.row.index}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="position" label="POSITION">
            </el-table-column>
            <el-table-column
              prop="type"
              label="TYPE">
            </el-table-column>
            <el-table-column
              prop="LOGICAL ID"
              label="logical_id">
            </el-table-column>
            <el-table-column
              prop="vendor_id"
              label="VENDOR ID">
            </el-table-column>
            <el-table-column
              prop="product_id"
              label="PRODUCT ID">
            </el-table-column>
            <el-table-column
              prop="revision"
              label="REVISION">
            </el-table-column>
            <el-table-column
              prop="responsive"
              label="RESPONSIVE">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.responsive">
              </template>
            </el-table-column>
            <el-table-column
              prop="disk_slot"
              label="DISK SLOT">
              <template scope="scope">
                <div v-if="scope.row.power_supply!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="power_supply"
              label="POWER SUPPLY">
              <template scope="scope">
                <div v-if="scope.row.power_supply!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sep"
              label="SEP">
              <template scope="scope">
                <div v-if="scope.row.sep!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fan"
              label="FAN">
              <template scope="scope">
                <div v-if="scope.row.fan!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="temp_sensor"
              label="TEMP SENSOR">
              <template scope="scope">
                <div v-if="scope.row.temp_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="volt_sensor"
              label="VOLT SENSOR">
              <template scope="scope">
                <div v-if="scope.row.volt_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="expander"
              label="EXPANDER">
              <template scope="scope">
                <div v-if="scope.row.expander!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sas_connector"
              label="SAS CONNECTOR">
              <template scope="scope">
                <div v-if="scope.row.sas_connector!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="internal_disk"
              label="INTERNAL DISK">
              <template scope="scope">
                <div v-if="scope.row.internal_disk!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ups"
              label="UPS">
              <template scope="scope">
                <div v-if="scope.row.ups!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="SHOW TEMPERATURE SENSORS" name="2">
          <el-table :data="tableAttr" border style="width: 100%">
            <el-table-column prop="index" label="INDEX">
              <template scope="scope">
                <span class="link" @click="getDetail(scope.row.index)">{{scope.row.index}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="position" label="POSITION">
            </el-table-column>
            <el-table-column
              prop="type"
              label="TYPE">
            </el-table-column>
            <el-table-column
              prop="LOGICAL ID"
              label="logical_id">
            </el-table-column>
            <el-table-column
              prop="vendor_id"
              label="VENDOR ID">
            </el-table-column>
            <el-table-column
              prop="product_id"
              label="PRODUCT ID">
            </el-table-column>
            <el-table-column
              prop="revision"
              label="REVISION">
            </el-table-column>
            <el-table-column
              prop="responsive"
              label="RESPONSIVE">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.responsive">
              </template>
            </el-table-column>
            <el-table-column
              prop="disk_slot"
              label="DISK SLOT">
              <template scope="scope">
                <div v-if="scope.row.power_supply!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="power_supply"
              label="POWER SUPPLY">
              <template scope="scope">
                <div v-if="scope.row.power_supply!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sep"
              label="SEP">
              <template scope="scope">
                <div v-if="scope.row.sep!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fan"
              label="FAN">
              <template scope="scope">
                <div v-if="scope.row.fan!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="temp_sensor"
              label="TEMP SENSOR">
              <template scope="scope">
                <div v-if="scope.row.temp_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="volt_sensor"
              label="VOLT SENSOR">
              <template scope="scope">
                <div v-if="scope.row.volt_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="expander"
              label="EXPANDER">
              <template scope="scope">
                <div v-if="scope.row.expander!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sas_connector"
              label="SAS CONNECTOR">
              <template scope="scope">
                <div v-if="scope.row.sas_connector!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="internal_disk"
              label="INTERNAL DISK">
              <template scope="scope">
                <div v-if="scope.row.internal_disk!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ups"
              label="UPS">
              <template scope="scope">
                <div v-if="scope.row.ups!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-row>


  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        tableAttr: [{
          index: 0,
          position: 'N/A',
          type: 'Controller',
          logical_id: '0x000d0x0ddfs0d0000',
          vendor_id: 'DDN',
          product_id: 'SFA7700',
          revision: '0000',
          responsive: true,
          disk_slot: '000',
          power_supply: '11111',
          sep: '',
          fan: '',
          temp_sensor: '',
          volt_sensor: '',
          expander: '',
          sas_connector: '4242',
          internal_disk: '75757',
          ups: ''
        }]
      }
    },
    methods: {
      createDetail () {
        console.log(2)
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
